<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">
	
	<!-- col -->
	<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
		<h1 class="page-title txt-color-blueDark">
			
			<!-- PAGE HEADER -->
			<i class="fa-fw fa fa-comment-o"></i> 
				SmartChat API 
		</h1>
	</div>
	<!-- end col -->
	
	<!-- right side of the page with the sparkline graphs -->
	<!-- col -->
	<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
		<!-- sparks -->
		<ul id="sparks">
			<li class="sparks-info">
				<h5> My Income <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
					1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
				</div>
			</li>
			<li class="sparks-info">
				<h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
					110,150,300,130,400,240,220,310,220,300, 270, 210
				</div>
			</li>
			<li class="sparks-info">
				<h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
					110,150,300,130,400,240,220,310,220,300, 270, 210
				</div>
			</li>
		</ul>
		<!-- end sparks -->
	</div>
	<!-- end col -->
	
</div>
<!-- end row -->

<!--
	The ID "widget-grid" will start to initialize all widgets below 
	You do not need to use widgets if you dont want to. Simply remove 
	the <section></section> and you can use wells or panels instead 
	-->


<!-- widget grid -->
<section id="widget-grid" class="">


	<div class="alert alert-warning">
		<strong>Description:</strong> This is a jQuery UI plugin serves as the front end of a simple Comet chat server. It is a pure UI plugin so you can easily plug it into whatever communication protocol of your choice.
	</div>
	<!-- row -->
	<div class="row">
		
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget well" id="wid-id-0">
				<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
					
					data-widget-colorbutton="false"	
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true" 
					data-widget-sortable="false"
					
				-->
				<header>
					<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
					<h2>Widget Title </h2>				
					
				</header>

				<!-- widget div-->
				<div>
					
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
						<input class="form-control" type="text">	
					</div>
					<!-- end widget edit box -->
					
					<!-- widget content -->
					<div class="widget-body">
						
						<!-- this is what the user will see -->
						<h5>Here are the few options you can customize for your chat box:</h5>	
						<img src="img/demo/chat.png" alt="Chat" class="bordered img-responsive" style="margin-bottom:10px;">
						<br>
						
						<div class="alert alert-info">
							In the box below we will capture every chat window opened. Try to open the chat windows by clicking on the left chat users. You will notice all the chats being logged below.
						</div>
						<div id="chatlog" style="height: 300px; border:1px dashed #333; overflow-x: auto" class="padding-10 custom-scroll">
							<p><i><- Type in your chat window and see this chat log update</i></p>
						</div>
					</div>
					<!-- end widget content -->
					
				</div>
				<!-- end widget div -->
				
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->

		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
			
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget well" id="wid-id-1">
				<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
					
					data-widget-colorbutton="false"	
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true" 
					data-widget-sortable="false"
					
				-->
				<header>
					<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
					<h2>Widget Title </h2>				
					
				</header>

				<!-- widget div-->
				<div>
					
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
						<input class="form-control" type="text">	
					</div>
					<!-- end widget edit box -->
					
					<!-- widget content -->
					<div class="widget-body">
						
						<!-- this is what the user will see -->
							
<h5>Here are the few options you can customize for your chat box:</h5>

<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">      	<span style="color: #000000">options</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #000000; font-weight: bold">{</span>
	    <span style="color: #000000">id</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">//id for the DOM element</span>
	    <span style="color: #000000">title</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// title of the chatbox</span>
	    <span style="color: #000000">user</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">null</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// can be anything associated with this chatbox</span>
	    <span style="color: #000000">hidden</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">false</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// show or hide the chatbox</span>
	    <span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">0</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// relative to right edge of the browser window</span>
	    <span style="color: #000000">width</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">230</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #8f5902; font-style: italic">// width of the chatbox</span>
	    <span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
		<span style="color: #8f5902; font-style: italic">// override this</span>
		<span style="color: #204a87; font-weight: bold">this</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">boxManager</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">.</span><span style="color: #000000">first_name</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
	    <span style="color: #000000; font-weight: bold">},</span>
	    <span style="color: #000000">boxClosed</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">)</span> <span style="color: #000000; font-weight: bold">{},</span> <span style="color: #8f5902; font-style: italic">// called when the close icon is clicked</span>
	    <span style="color: #000000; font-weight: bold">...</span>
        <span style="color: #000000; font-weight: bold">}</span>
</pre></div>
<br>
<h5>To create a chatbox at the bottom of the browser window with an offset of 200px to the right edge, use the following code:</h5>
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">      <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87">document</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">ready</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(){</span>
          <span style="color: #8f5902; font-style: italic">// to create</span>
          <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;#chat_div&quot;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">({</span><span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">&quot;chat_div&quot;</span><span style="color: #000000; font-weight: bold">,</span>
                                  <span style="color: #000000">title</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">&quot;Title&quot;</span><span style="color: #000000; font-weight: bold">,</span>
                                  <span style="color: #000000">user</span> <span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #4e9a06">&quot;can be anything&quot;</span>
                                  <span style="color: #000000">offset</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #0000cf; font-weight: bold">200</span><span style="color: #000000; font-weight: bold">,</span>
                                  <span style="color: #000000">messageSent</span><span style="color: #ce5c00; font-weight: bold">:</span> <span style="color: #204a87; font-weight: bold">function</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #000000">id</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">user</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">){</span>
                                       <span style="color: #000000">alert</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;DOM &quot;</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">id</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #4e9a06">&quot; just typed in &quot;</span> <span style="color: #ce5c00; font-weight: bold">+</span> <span style="color: #000000">msg</span><span style="color: #000000; font-weight: bold">);</span>
                                  <span style="color: #000000; font-weight: bold">}});</span>
          <span style="color: #8f5902; font-style: italic">// to insert a message</span>
          <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;#chat_div&quot;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;option&quot;</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">&quot;boxManager&quot;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">addMsg</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;Mr. Foo&quot;</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">&quot;Barrr!&quot;</span><span style="color: #000000; font-weight: bold">);</span>
      <span style="color: #000000; font-weight: bold">});</span>
</pre></div>

<br>	
<h5>Use the following standard jQuery UI approach to access the options after the chat box is created:</h5>	
<div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">      <span style="color: #000000; font-weight: bold">...</span>
      <span style="color: #8f5902; font-style: italic">// getter</span>
      <span style="color: #204a87; font-weight: bold">var</span> <span style="color: #000000">offset</span> <span style="color: #ce5c00; font-weight: bold">=</span> <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;#chat_div&quot;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;option&quot;</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">&quot;offset&quot;</span><span style="color: #000000; font-weight: bold">);</span>
      
      <span style="color: #8f5902; font-style: italic">// setter, to change the possition of the chatbox</span>
      <span style="color: #000000">$</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;#chat_div&quot;</span><span style="color: #000000; font-weight: bold">).</span><span style="color: #000000">chatbox</span><span style="color: #000000; font-weight: bold">(</span><span style="color: #4e9a06">&quot;option&quot;</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #4e9a06">&quot;offset&quot;</span><span style="color: #000000; font-weight: bold">,</span> <span style="color: #0000cf; font-weight: bold">300</span><span style="color: #000000; font-weight: bold">);</span>
</pre></div>


					</div>
					<!-- end widget content -->
					
				</div>
				<!-- end widget div -->
				
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
		
	</div>

	<!-- end row -->

	<!-- row -->

	<div class="row">

		<!-- a blank row to get started -->
		<div class="col-sm-12">
			<!-- your contents here -->
		</div>
			
	</div>

	<!-- end row -->

</section>
<!-- end widget grid -->


	






<script type="text/javascript">
	
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 * TO LOAD A SCRIPT:
	 * var pagefunction = function (){ 
	 *  loadScript(".../plugin.js", run_after_loaded);	
	 * }
	 * 
	 * OR you can load chain scripts by doing
	 * 
	 * loadScript(".../plugin.js", function(){
	 * 	 loadScript("../plugin.js", function(){
	 * 	   ...
	 *   })
	 * });
	 */
	
	// pagefunction
	
	var pagefunction = null;
	
	// run pagefunction


	
	
</script>
